.project-app
  max-width: 1020px
  min-width: 300px
  padding: 1em 0
.card-container
  margin: 30px auto
  display: -webkit-flex
  display: flex
  justify-content: space-between
  flex-wrap: wrap
  @media screen and (max-width: 960px)
    width: 660px
  @media screen and (max-width: 660px)
    width: 320px
  .project-card
    width: 320px
    height: 160px
    margin-bottom: 20px
    position: relative
    .card-wrap
      box-sizing: border-box
      height: 100%
      display: block
      padding: 20px
      border: 1px solid color-border
      border-radius: 4px
      color: color-dark
      transition: border-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out
      &:hover
        border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.15)
        box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.1)
      .card-header
        position: absolute
        width: 100%
        height: 20px
        top: 0
        left: 0
        border-top-left-radius: 4px
        border-top-right-radius: 4px
      .card-title
        margin-top: 10px
        margin-bottom: 5px
        font-size: 1.2em
      .card-footer
        box-sizing: border-box
        position: absolute
        width: 100%
        padding: 0 20px
        bottom: 20px
        left: 0
        span
          &:first-child
            padding-right: 20px
          .fa
            padding-right: 5px